<div class="transition duration-300 slide-in-content grid grid-cols-1 gap-6 w-full lg:w-4/5 xl:w-4/5 2xl:w-3/5 m-auto">
    <div class="flex-1 bg-gray-200 dark:bg-gray-700">
        <div class="flex m-4">
            <div class="flex w-1/2">
                <div class="inline pr-2 text-gray-600 dark:text-gray-400" data-translate="input_port">
                    Input port:
                </div>
                <div class="inline overflow-auto" id="input_port">
                </div>
            </div>
            <div class="flex-1 pr-2 text-gray-600 dark:text-gray-400 text-right" data-translate="status">
                Status:
            </div>
            <div class="contents text-right w-20 uppercase" id="recording_status">
            </div>

        </div>

        <div class="flex flex-col sm:flex-row">
            <div class="content-center flex-1 text-center">
                <div class="p-5">
                    <label class="h-8 block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="start_recording">
                        Start recording
                    </label>
                    <button id="start_recording_button" onclick="change_setting('start_recording', '0');
                    this.classList.add('animate-pulse', 'pointer-events-none');
                    document.getElementById('save_recording_button').classList.remove('pointer-events-none', 'opacity-50');
                    document.getElementById('cancel_recording_button').classList.remove('pointer-events-none', 'opacity-50');
                    document.getElementById('recording_status').innerHTML = '<p class=\'text-red-400\' data-translate=\'starting\'>starting</p>'"
                            class="w-auto px-10 h-10 outline-none mb-2
                            bg-gray-100 dark:bg-gray-600 font-bold py-2 rounded-2xl inline-flex items-center">
                        <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"
                             class="h-6 w-6 inline m-auto fill-current text-red-500">
                            <path d="M20 0a20 20 0 100 40 20 20 0 000-40zm0 28a8 8 0 110-16 8 8 0 010 16z"/>
                        </svg>
                    </button>
                </div>
            </div>

            <div class="content-center flex-1 text-center">
                <div class="p-5">
                    <label class="h-8 block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="stop_and_save">
                        Stop and Save
                    </label>
                    <button id="save_recording_button"
                            onclick="this.classList.add('hidden');this.nextElementSibling.classList.remove('hidden')"
                            class="w-auto px-10 h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold
                            py-2 rounded-2xl inline-flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline m-auto" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
                        </svg>
                    </button>
                    <button onclick="change_setting('save_recording', '0');
                    temporary_disable_button(this, 3000);
                    document.getElementById('save_recording_button').classList.add('pointer-events-none', 'opacity-50');
                    document.getElementById('cancel_recording_button').classList.add('pointer-events-none', 'opacity-50');
                    document.getElementById('recording_status').innerHTML = '<p>saving</p>'"
                            class="w-auto px-10 h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold
                            py-2 rounded-2xl inline-flex items-center hidden">
                        <span class="w-full uppercase text-xs text-green-400" data-translate="confirm">Confirm</span>
                    </button>
                </div>
            </div>
            <div class="content-center flex-1 text-center">
                <div class="p-5">
                    <label class="h-8 block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="cancel_recording">
                        Cancel recording
                    </label>
                    <button id="cancel_recording_button"
                            onclick="this.classList.add('hidden');this.nextElementSibling.classList.remove('hidden')"
                            class="w-auto px-10 h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold
                                py-2 rounded-2xl inline-flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline m-auto" fill="none"
                             viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M6 18L18 6M6 6l12 12"/>
                        </svg>
                    </button>
                    <button onclick="change_setting('cancel_recording', '0');
                    temporary_disable_button(this, 3000);
                    document.getElementById('save_recording_button').classList.add('pointer-events-none', 'opacity-50');
                    document.getElementById('cancel_recording_button').classList.add('pointer-events-none', 'opacity-50');
                    document.getElementById('recording_status').innerHTML = '<p data-translate=\'canceling\'>canceling</p>'"
                            class="w-full h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold
                            py-2 px-2 rounded-2xl inline-flex items-center hidden">
                        <span class="w-full uppercase text-xs text-red-400" data-translate="confirm">Confirm</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="flex-1 bg-gray-200 dark:bg-gray-700" href="#/">
        <div data-translate="metronome" class="m-4 text-base text-gray-600 dark:text-gray-400 absolute">Metronom</div>
        <div class="grid grid-cols-1 justify-items-center">
            <div class="text-2xl mb-2"><span id="beats_per_minute">160</span> BPM</div>
            <div class="w-full justify-center flex text-sm text-gray-600 dark:text-gray-400">
                20<input onchange="change_bpm(this.value);"
                         oninput="document.getElementById('beats_per_minute').innerHTML = this.value;" id="bpm_slider"
                         class="w-1/2 mx-2" type="range" min="20" max="280">280
            </div>
            <button id="metronome_start" onclick="ticker.start();this.classList.add('hidden');
                        this.nextElementSibling.classList.remove('hidden');
                        is_playing = 1;"
                    class="w-20 h-8 outline-none my-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2 rounded-2xl inline-flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-full justify-items-center" fill="none"
                     viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </button>
            <button id="metronome_stop" onclick="ticker.stop();
                    this.classList.add('hidden');
                    this.previousElementSibling.classList.remove('hidden');
                    is_playing = 0;"
                    class="w-20 h-8 outline-none my-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2 rounded-2xl inline-flex items-center animate-pulse hidden">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-full justify-items-center" fill="none"
                     viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"></path>
                </svg>
            </button>
            <div class="grid grid-cols-2 sm:grid-cols-1 justify-items-center">
                <div data-translate="beats_per_measure" class="mt-1 text-base text-gray-600 dark:text-gray-400">Uderzeń
                    na takt
                </div>
                <div class="justify-center flex">
                    <svg onclick="input = document.getElementById('beats_per_measure');
                            input.value = parseInt(input.value) - 1;
                            if(input.value <= 2){input.value = 3};
                            change_beats_per_measure(input.value);" id="subtract_beat_per_measure"
                         xmlns="http://www.w3.org/2000/svg" class="h-8 w-6 cursor-pointer" fill="none"
                         viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <input onchange="if(this.value <= 2){this.value = 3};
                            if(this.value >= 13){this.value = 12};
                            change_beats_per_measure(this.value);" min="3" max="12" type="number" id="beats_per_measure"
                           class="h-8 py-2 px-2 w-20 mb-2
                            rounded-2xl bg-gray-100 dark:bg-gray-600 appearance-none">
                    <svg onclick="input = document.getElementById('beats_per_measure');
                            input.value = parseInt(input.value) + 1;
                            if(input.value >= 13){input.value = 12};
                            change_beats_per_measure(input.value);" id="add_beat_per_measure"
                         xmlns="http://www.w3.org/2000/svg" class="h-8 w-6 cursor-pointer" fill="none"
                         viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>

                <div class="mt-1 text-base text-gray-600 dark:text-gray-400" data-translate="volume">Głośność</div>
                <div class="justify-center flex">
                    <svg onclick="input = document.getElementById('metronome_volume');
                            input.value = parseInt(input.value) - 10;
                            if(input.value <= 0){input.value = 0};
                            change_volume(input.value);" xmlns="http://www.w3.org/2000/svg" class="h-8 w-6" fill="none"
                         viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M 15.536 8.464 C 17.489 10.417 17.489 13.583 15.536 15.536 M 5.586 15 L 4 15 C
                                3.448 15 3 14.552 3 14 L 3 10 C 3 9.448 3.448 9 4 9 L 5.586 9 L 10.293 4.293 C 10.923
                                3.663 12 4.109 12 5 L 12 19 C 12 19.891 10.923 20.337 10.293 19.707 L 5.586 15 Z">
                        </path>
                    </svg>
                    <input onchange="if(this.value <= 0){this.value = 0};
                            if(this.value >= 100){this.value = 100};
                            change_volume(this.value);" value="50" min="0" max="100" step="10" type="number"
                           id="metronome_volume" class="h-8 py-2 px-2 w-20 mb-2
                            rounded-2xl bg-gray-100 dark:bg-gray-600 appearance-none">
                    <svg onclick="input = document.getElementById('metronome_volume');
                            input.value = parseInt(input.value) + 10;
                            if(input.value >= 100){input.value = 100};
                            change_volume(input.value);" xmlns="http://www.w3.org/2000/svg"
                         class="h-8 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1
                                1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0
                                .891-1.077 1.337-1.707.707L5.586 15z"></path>
                    </svg>
                </div>

            </div>

        </div>
    </div>

    <div class="flex-1 grid p-5 bg-gray-200 dark:bg-gray-700 shadow-xl rounded-lg">

        <div class="flex-1 font-bold text-xl pb-2 text-gray-600 dark:text-gray-400" data-translate="upload_songs">
            Upload songs
        </div>
        <div id="drop-area"
             class="content-center flex-1 border-dashed border-4 border-green-400 border-opacity-50 p-5 mb-4">
            <form class="my-form grid justify-items-center">
                <input class="hidden" name="song" type="file" id="fileElem" multiple
                       accept=".mid,.musicxml,.xml,.mxl,.abc"
                       onchange="handleFiles(this.files)">
                <label class="text-xl font-bold" data-translate="drag_and_drop_midi">Drag and drop midi file
                    here</label>
                <label class="block h-10 inline m-auto fill-current underline button cursor-pointer" for="fileElem"
                       data-translate="or_click_to_choose">
                    or click to choose files to upload
                </label>
            </form>
            <div id="progress-bar-group" class="relative pt-1 hidden">
                <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-green-200">
                    <div id="progress-bar" style="width:30%"
                         class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"></div>
                </div>
            </div>
            <div id="gallery" class="max-h-60 overflow-y-auto"></div>
        </div>
    </div>

    <div id="player_and_songs" class="flex-1 grid p-5 bg-gray-200 dark:bg-gray-700 shadow-xl rounded-lg">
        <div id="midi_player_wrapper" class="contents hidden">
            <div class="flex bg-gray-100 dark:bg-gray-600 rounded-2xl m-auto mb-2">
                <midi-player
                        src=""
                        sound-font id="midi_player"
                        visualizer="#myVisualizer">
                </midi-player>
                <a href="https://github.com/cifkao/html-midi-player" target="_blank"
                   class="flex items-center space-x-1">
                    <svg class="w-4 h-4 text-gray-400 mr-2" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
                                0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
                                1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95
                                0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68
                                0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0
                                3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013
                                8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
                    </svg>
                </a>
            </div>
            <div class="flex m-auto">
                <div class="inline pr-2 text-gray-600 dark:text-gray-400" data-translate="play_port">
                    Play port:
                </div>
                <div class="inline" id="play_port"></div>
            </div>
            <div class="flex m-auto">
                <div class="p-2">
                    <button id="start_midi_play" onclick="song_name = document.getElementById('midi_player').src;
                        song_name = song_name.replace('api/change_setting?setting_name=download_song&value=', '');
                        change_setting('start_midi_play', song_name);
                        this.classList.add('hidden');
                        this.nextElementSibling.classList.remove('hidden');"
                            class="w-40 h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2 rounded-2xl inline-flex items-center">
                        <span class="flex uppercase text-xs m-auto ">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 " fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                            </svg>
                            <div class="align-middle" data-translate="play_on_piano">
                                Play on piano
                            </div>
                        </span>
                    </button>

                    <button id="stop_midi_play" onclick="change_setting('stop_midi_play', '');
                    this.classList.add('hidden');
                    this.previousElementSibling.classList.remove('hidden');"
                            class="w-40 h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2 rounded-2xl inline-flex items-center hidden">
                        <span class="flex uppercase text-xs m-auto">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
                            </svg>
                            <div class="align-middle" data-translate="stop">
                                Stop
                            </div>
                        </span>
                    </button>
                </div>
            </div>
        </div>

        <div class="hidden" id="midi_visualizer_wrapper">
            <div class="flex w-full mb-2">
                <div id="midi_visualizer_close_button" class="absolute right-0" onclick="document.getElementById('myVisualizer').src = '';
            document.getElementById('midi_visualizer_wrapper').classList.add('hidden');
            clearTimeout(scrolldelay)">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 cursor-pointer" fill="none"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </div>
                <midi-visualizer src="" type="waterfall" id="myVisualizer"></midi-visualizer>
            </div>
        </div>
        <div id="visualizer_error"
             class="w-4/5 m-auto mb-2 bg-red-100 border border-red-400 text-red-700 p-4 rounded relative hidden"
             role="alert">
            <strong class="font-bold" id="visualizer_error_name"></strong>
            <span class="block sm:inline" id="visualizer_error_description"></span>
        </div>

        <div id="learn_midi_wrapper" class="contents hidden">
            <div class="flex m-auto">
                <div class="p-2">
                    <button id="start_learning" onclick="change_setting('start_learning_song', '');
                        this.classList.add('hidden');
                        this.nextElementSibling.classList.remove('hidden');"
                            class="w-40 h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2
                            rounded-2xl inline-flex items-center pointer-events-none opacity-50">
                        <span class="flex uppercase text-xs m-auto ">
                            <div id="learning_status" class="align-middle">...</div>
                        </span>
                    </button>

                    <button id="stop_learning" onclick="change_setting('stop_learning_song', '');
                    this.classList.add('hidden');
                    this.previousElementSibling.classList.remove('hidden');"
                            class="w-40 h-10 outline-none mb-2 bg-gray-100 dark:bg-gray-600 font-bold py-2 px-2
                            rounded-2xl inline-flex items-center hidden">
                        <span class="flex uppercase text-xs m-auto">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
                            </svg>
                            <div class="align-middle" data-translate="stop_learning">
                                Stop learning
                            </div>
                        </span>
                    </button>
                </div>
                <div class="p-2 mt-2">
                    <label class="inline-flex items-center">
                        <input id="is_loop_active" onchange="change_setting('change_learning_loop', this.checked)"
                               class="w-4 h-4 mr-2 border border-gray-300 rounded"
                               type="checkbox"/>
                        <div data-translate="loop">Loop</div>
                    </label>
                </div>
            </div>


            <div class="flex flex-wrap w-full md:w-1/2 m-auto">
                <div class="w-full md:w-1/2 px-3 md:mb-0 m-auto">
                    <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="practice">
                        Practice
                    </label>
                    <div class="relative">
                        <select onchange="change_setting('change_practice', this.value)" id="practice"
                                class="h-10 block appearance-none w-full bg-gray-100 dark:bg-gray-600
                py-2 px-2 pr-8 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                            <option value="0" data-translate="melody">Melody</option>
                            <option value="1" data-translate="rhytm">Rhythm</option>
                            <option value="2" data-translate="listen">Listen</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-3 m-auto">
                    <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400">
                        <div data-translate="tempo">Tempo</div>
                        (<b id="tempo">100</b>%)
                    </label>
                    <div class="justify-center flex">
                        <svg onclick="input = document.getElementById('tempo_slider');
                            input.value = parseInt(input.value) - 1;
                            if(input.value <= 9){input.value = 1};
                            change_setting('change_tempo', input.value);
                            document.getElementById('tempo').innerHTML = input.value;" class="h-8 w-6 cursor-pointer"
                             fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <div class="w-full justify-center flex text-sm text-gray-600 dark:text-gray-400">
                            10<input onchange="change_setting('change_tempo', this.value);"
                                     oninput="document.getElementById('tempo_slider').value = this.value;
                                    document.getElementById('tempo').innerHTML = this.value;"
                                     id="tempo_slider" class="w-1/2 mx-2" type="range" value="100" min="10" max="200">200
                        </div>
                        <svg onclick="input = document.getElementById('tempo_slider');
                            input.value = parseInt(input.value) + 1;
                            if(input.value >= 201){input.value = 200};
                            change_setting('change_tempo', input.value);
                            document.getElementById('tempo').innerHTML = input.value;" class="h-8 w-6 cursor-pointer"
                             fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>


            </div>

            <div class="flex flex-wrap w-full md:w-1/2 m-auto">
                <div class="w-full md:w-1/2 px-3 md:mb-0 m-auto">
                    <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="hands">
                        Hands
                    </label>
                    <div class="relative">
                        <select onchange="change_setting('change_hands', this.value)" id="hands" class="h-10 block appearance-none w-full bg-gray-100 dark:bg-gray-600
                py-2 px-2 pr-8 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                            <option value="0" data-translate="both">Both</option>
                            <option value="1" data-translate="right">Right</option>
                            <option value="2" data-translate="left">Left</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-3 md:mb-0 m-auto">
                    <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="mute_hands">
                        Mute hands
                    </label>
                    <div class="relative">
                        <select onchange="change_setting('change_mute_hand', this.value)" id="mute_hand" class="h-10 block appearance-none w-full bg-gray-100 dark:bg-gray-600
                py-2 px-2 pr-8 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                            <option value="0" data-translate="off">Off</option>
                            <option value="1" data-translate="right">Right</option>
                            <option value="2" data-translate="left">Left</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-wrap w-full md:w-1/2 m-auto">
                <div class="w-full md:w-1/2 px-3 md:mb-0 m-auto">
                    <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="wrong_notes">
                        Wrong notes
                    </label>
                    <div class="relative">
                        <select onchange="change_setting('change_wrong_notes', this.value)" id="wrong_notes" class="h-10 block appearance-none w-full bg-gray-100 dark:bg-gray-600
                py-2 px-2 pr-8 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                            <option value="0" data-translate="disabled">Disabled</option>
                            <option value="1" data-translate="enabled">Enabled</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-3 md:mb-0 m-auto">
                    <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="future_notes">
                        Future notes
                    </label>
                    <div class="relative">
                        <select onchange="change_setting('change_future_notes', this.value)" id="future_notes" class="h-10 block appearance-none w-full bg-gray-100 dark:bg-gray-600
                py-2 px-2 pr-8 rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                            <option value="0" data-translate="disabled">Disabled</option>
                            <option value="1" data-translate="enabled">Enabled</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-wrap w-full m-auto">
                <div class="w-full md:w-1/2 px-3 md:mb-0 m-auto">
                    <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="number_of_mistakes">
                        Number of mistakes to restart loop (0 - never)
                    </label>
                    <div class="flex">
                        <svg onclick="document.getElementById('number_of_mistakes').stepDown();
                    document.getElementById('number_of_mistakes').dispatchEvent(new Event('change'));
                    " xmlns="http://www.w3.org/2000/svg"
                             class="m-auto w-full h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <input onchange="change_setting('number_of_mistakes', document.getElementById('number_of_mistakes').value)"
                               id="number_of_mistakes" name="field_name" type="number" value="0" min="0" max="255"
                               class="h-10 block appearance-none w-full bg-gray-100 dark:bg-gray-600 text-center
                               rounded-2xl leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                        <svg onclick="document.getElementById('number_of_mistakes').stepUp();
                        document.getElementById('number_of_mistakes').dispatchEvent(new Event('change'));
                        " xmlns="http://www.w3.org/2000/svg"
                             class="m-auto w-full h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <div class="w-full md:w-1/2 m-auto">
                <div id="learning_slider_wrapper" class="mt-4">
                    <div slider="" id="slider-distance">
                        <div>
                            <div inverse-left="" style="width:0%;"></div>
                            <div inverse-right="" style="width:0%;"></div>
                            <div range="" style="left:0%;right:0%;"></div>
                            <span thumb="" style="left:0%;"></span>
                            <span thumb="" style="left:100%;"></span>
                            <div sign="" style="left:0%;">
                                <span id="value1">0</span>
                            </div>
                            <div sign="" style="left:100%;">
                                <span id="value2">100</span>
                            </div>
                        </div>
                        <input id="learning_start_point" type="range" tabindex="0" value="0" max="100" min="0" step="1"
                               oninput="show_left_slider(this)" onchange="change_setting('learning_start_point', this.value);
                               document.getElementById('start_point').innerHTML = this.value">
                        <input id="learning_end_point" type="range" tabindex="0" value="100" max="100" min="0" step="1"
                               oninput="show_right_slider(this)" onchange="change_setting('learning_end_point', this.value);
                               document.getElementById('end_point').innerHTML = this.value">
                    </div>
                </div>
                <div class="flex">
                    <label class="w-1/2 block text-xs text-gray-600 dark:text-gray-400">
                        <div data-translate="start_point">Start point</div>
                        (<b id="start_point">0</b>%)</b>

                        <div class='has-tooltip float-left'>
                        <span class='inline-block tooltip rounded shadow-lg p-1 bg-gray-100
                        dark:bg-gray-600 text-gray-600 dark:text-gray-400 -mt-8'
                              data-translate="set_the_current_track_time">
                            Set the current track time as the loop start
                        </span>
                            <svg onclick="change_setting('set_current_time_as_start_point', '')"
                                 xmlns="http://www.w3.org/2000/svg"
                                 class="h-5 w-5 text-gray-800 dark:text-gray-200 cursor-pointer"
                                 fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"/>
                            </svg>
                        </div>

                    </label>
                    <label class="w-1/2 float-right text-xs text-right block text-gray-600 dark:text-gray-400">
                        <div data-translate="end_point">End point</div>
                        (<b id="end_point">0</b>%)</b>
                        <div class='has-tooltip float-right'>
                        <span class='inline-block tooltip rounded shadow-lg p-1 bg-gray-100
                        dark:bg-gray-600 text-gray-600 dark:text-gray-400 -mt-8'
                              data-translate="set_the_current_track_time_as_the_loop_end">
                            Set the current track time as the loop end
                        </span>
                            <svg onclick="change_setting('set_current_time_as_end_point', '')"
                                 xmlns="http://www.w3.org/2000/svg"
                                 class="h-5 w-5 text-gray-800 dark:text-gray-200 cursor-pointer"
                                 fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"/>
                            </svg>
                        </div>
                    </label>
                </div>

            </div>

            <div class="flex flex-wrap w-full md:w-1/2 m-auto">
                <div class="w-full md:w-1/2 px-3 m-auto">
                    <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="left_hand_color">
                        Left hand color
                    </label>
                    <div class="justify-center flex">
                        <svg onclick="change_setting('change_handL_color', -1)" xmlns="http://www.w3.org/2000/svg"
                             class="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                        <div class="w-full justify-center flex text-sm text-gray-600 dark:text-gray-400">
                            <svg class="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <rect id="hand_colorL" width="30" height="30" style="fill:rgb(0,0,255);"/>
                            </svg>
                        </div>
                        <svg onclick="change_setting('change_handL_color', 1)" xmlns="http://www.w3.org/2000/svg"
                             class="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </div>
                </div>

                <div class="w-full md:w-1/2 px-3 m-auto">
                    <label class="block uppercase tracking-wide text-xs font-bold mt-2 text-gray-600 dark:text-gray-400"
                           data-translate="right_hand_color">
                        Right hand color
                    </label>
                    <div class="justify-center flex">
                        <svg onclick="change_setting('change_handR_color', -1)" xmlns="http://www.w3.org/2000/svg"
                             class="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                        <div class="w-full justify-center flex text-sm text-gray-600 dark:text-gray-400">
                            <svg class="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <rect id="hand_colorR" width="30" height="30" style="fill:rgb(0,0,255);"/>
                            </svg>
                        </div>
                        <svg onclick="change_setting('change_handR_color', 1)" xmlns="http://www.w3.org/2000/svg"
                             class="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </div>
                </div>
            </div>

            <div id="sheet_wrapper" style="height:80vh; margin-bottom: 100px;">
                {% include 'sheet_music.html' %}
            </div>
        </div>


        <div class="flex">
            <div class="flex-1 font-bold text-xl pb-2 text-gray-600 dark:text-gray-400" data-translate="songs_list">
                Songs list
            </div>
            <div class="relative">
              <span class="absolute left-0 flex items-center pl-2">
                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                       viewBox="0 0 24 24" class="w-6 h-6 mt-2"><path
                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                  </svg>
              </span>
                <input onkeyup="clearTimeout(search_song);search_song =
                setTimeout(function(){ document.getElementById('songs_page').value = 1;get_songs(); }, 1200);"
                       id="song_search"
                       class="h-10 py-2 text-sm mb-2 rounded-2xl bg-gray-100 dark:bg-gray-600 pl-10 focus:outline-none focus:bg-white">
                <span onclick="this.previousElementSibling.value = '';
                    get_songs();" id="clear_input"
                      class="h-10 absolute right-0 top-0 flex items-center cursor-pointer">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                       stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
              </span>
            </div>
        </div>
        <div id="sort_by" value=""></div>
        <div class="overflow-auto lg:overflow-visible " id="songs_list_table">
            <div class="text-center" data-translate="getting_songs_list">
                Getting songs list
            </div>
        </div>

    </div>
</div>